<!--
 * @Author: ZRX
 * @Date: 2024-01-16 13:33:19
 * @LastEditors: sueRimn
 * @LastEditTime: 2024-01-17 14:09:29
 * @Descripttion: 
 * @version: 
-->
<template>
  <h4 class="title_lv2">关于语言切换使用</h4>

  <div class="statement">
    <ol>
      <li>
        在templete中使用 直接使用<span class="tip_important">$t()</span>无需引入 例：
        <span class="tip_important">{{ exampleStr }}</span>
      </li>
      <li>在ts中使用需引入vue中的<span class="tip_important">getCurrentInstance</span>来初始化全局获取全局实例。<br /></li>
      <li>还可以在ts中直接使用I18n</li>
    </ol>
    <!-- 页面代码 源码 -->
    <dropWrap key="oreo">
      <pre><code class="language-js">{{ htm }} </code></pre>
    </dropWrap>
    <!-- 页面代码 源码 -->
  </div>
  <div class="hr das"></div>
  <h4 class="title_lv2">关于写入页面路径</h4>
  <div class="statement">
    <ol>
      <li>俄文添加至："src/languages/modules/ru.ts"</li>
      <li>中文添加至：src/languages/modules/zh.ts</li>
    </ol>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, nextTick } from "vue";
import dropWrap from "../dropWrap.vue";

const exampleStr = '{{ $t("header.logout") }}';
let htm = ref<string>(`
  1)
import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
proxy.$t("header.logout")
  2)
import I18n from "@/languages/index";
const $t = I18n.global.t;
      `);

/*  生命周期*/
onMounted(() => {
  nextTick(() => {
    Prism.highlightAll();
  });
});
</script>
<style lang="scss">
.tip_important {
  padding: 0 5px;
  color: red;
}
</style>
